import 'package:flutter/material.dart';

/**
 *  线性布局：沿水平或垂直方向排布子Widget，通过Row和Column来实现
 *  弹性布局：允许子widget按照一定能比例来分配父容器空间
 *  流式布局：把超出屏幕显示范围会自动折行的布局 （浮动）
 *  层叠布局：定位
 *
 * ConstrainedBox: 用于对齐子widget添加额外的约束，设置最小的高度
 * SizeBox:用于给子widget指定固定的宽高
 * */

class Layout extends StatelessWidget{

  Widget redBox = DecoratedBox(decoration: BoxDecoration(color: Colors.red));
  String str = '4545775dsdsdsds';
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
        appBar: AppBar(
          title: Text('布局页面'),
        ),
        body: new Center(
          child: SingleChildScrollView(
            child:   new Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text('第一行第一个文本'),
                    Text('第一行第二个文本')
                  ],
                ),
                Row(
                  mainAxisSize: MainAxisSize.min,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text('第二行第一个文本', style: TextStyle(fontSize: 35),),
                    Text('第二行第二个文本')
                  ],
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  textDirection: TextDirection.rtl,
                  children: <Widget>[
                    Text('第三行第一个文本'),
                    Text('第三行第二个文本')
                  ],
                ),
                Row(
                  children: <Widget>[
                    Container(
                      color: Colors.yellow,
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisSize: MainAxisSize.max,
                        children: <Widget>[
                          Container(
                            color: Colors.red,
                            child: Column(
                              mainAxisSize: MainAxisSize.max,
                              children: <Widget>[
                                Text('第四行文本')
                              ],
                            ),
                          )
                        ],
                      ),
                    )
                  ],
                ),
                Flex(
                  direction: Axis.horizontal,
                  children: <Widget>[
                    Expanded(
                      flex: 1,
                      child: Container(
                        height: 30.0,
                        color: Colors.yellow,
                      ),
                    ),
                    Expanded(
                      flex: 2,
                      child: Container(
                        height: 30,
                        color: Colors.blue,
                      ),
                    )
                  ],
                ),
                Padding(
                  padding: const EdgeInsets.only(top:20),
                  child: SizedBox(
                    height: 100.0,
                    child: Flex(
                      direction: Axis.vertical,
                      children: <Widget>[
                        Expanded(
                          flex: 2,
                          child: Container(
                            height: 40,
                            color: Colors.purple,
                          ),
                        ),
                        Spacer(
                          flex: 1,
                        ),
                        Expanded(
                          flex: 1,
                          child: Container(
                            height: 40,
                            color: Colors.green,
                          ),
                        )
                      ],
                    ),
                  ),
                ),
                Wrap(
                  spacing: 100.0,//主轴（水平）方向间距
                  runSpacing: 8.0,//纵轴（垂直）方向间距
                  alignment: WrapAlignment.center, // 主轴方向居中
                  children: <Widget>[
                    new Chip(
                      label:new Text('chip1'),
                      avatar: new CircleAvatar(backgroundColor: Colors.blue, child: Text('A'),),
                    ),
                    new Chip(
                      label:new Text('chip2'),
                      avatar: new CircleAvatar(backgroundColor: Colors.blue, child: Text('B'),),
                    ),
                    new Chip(
                      label:new Text('chip3'),
                      avatar: new CircleAvatar(backgroundColor: Colors.blue, child: Text('C'),),
                    ),
                    new Chip(
                      label:new Text('chip4'),
                      avatar: new CircleAvatar(backgroundColor: Colors.blue, child: Text('D'),),
                    ),
                  ],
                ),
                Container(
                  width: 200,
                  height: 200,
                  color: Colors.amber,
                  child:  Stack(
                    alignment: Alignment.center,
                    children: <Widget>[
                      Container(
                        child: Text('定位', style: TextStyle(color: Colors.pink)),
                        color: Colors.red,
                      ),
                      Positioned(
                        left: 18,
                        child: Text('左边'),
                      ),
                      Positioned(
                        top: 600,
                        child: Text('顶部'),
                      )
                    ],
                  ),
                ),
                Padding(
                  // 四个方向都添加6像素补白
                  padding: EdgeInsets.all(16),
                  child: Column(
                    //显示指定对其方式为左对齐，排除对其干扰
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Padding(
                        // 左边添加8像素补白
                        padding: const EdgeInsets.only(left: 8),
                        child: Text('左边8像素'),
                      ),
                      Padding(
                        padding: const EdgeInsets.symmetric(vertical: 8) ,
                        child: Text('上下都添加8像素'),
                      ),
                      Padding(
                          padding: const EdgeInsets.fromLTRB(20, 10, 20,10 ),
                          child: Text('上下10左右20')
                      )
                    ],
                  ),
                ),
                ConstrainedBox(
                  constraints: BoxConstraints(
                    minWidth: double.infinity,// 宽度尽可能大
                    minHeight: 50, //最小高度为50
                  ),
                  child: Container(
                    height: 5,
                    child: redBox,
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(top:8),
                  child:  SizedBox(
                    width: 80,
                    height: 80,
                    child: redBox,
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(top: 50, left:120 ),
//                  transform: Matrix4.rotationZ(0.2),
                  child: DecoratedBox(
                      decoration: BoxDecoration(
                        gradient: LinearGradient(colors: [Colors.red, Colors.orange[700]]),//渐变
                        borderRadius: BorderRadius.circular(3),// 3像素圆角
                        boxShadow: [ // 阴影
                          BoxShadow(
                            color: Colors.black54,
                            offset: Offset(2, 2),
                            blurRadius: 4
                          )
                        ]
                      ),
                    child: Padding(
                        padding: EdgeInsets.symmetric(horizontal: 80, vertical: 18),
                        child: Text('Login', style: TextStyle(color: Colors.white),),
                    ),
                  ),
                ),
                  SingleChildScrollView(
                    child: Center(
                      child: Column(
                        children: str.split('')
                            .map((v)=>Text(v, textScaleFactor: 2))
                            .toList()
                      ),
                    ),
                  )
              ],
            ),
          )
        )
    );
  }
}